<template>
	<view class="container">
		<view class="header">
			<text class="title">修改密码</text>
			<text class="subtitle">请确保新密码的安全性</text>
		</view>

		<view class="form">
			<view class="form-item">
				<text class="label">当前密码</text>
				<input class="input" type="password" v-model="formData.oldPassword" placeholder="请输入当前密码" />
			</view>
			
			<view class="form-item">
				<text class="label">新密码</text>
				<input class="input" type="password" v-model="formData.newPassword" placeholder="请输入新密码" />
				<text class="hint">密码长度8-20位，包含字母和数字</text>
			</view>
			
			<view class="form-item">
				<text class="label">确认新密码</text>
				<input class="input" type="password" v-model="formData.confirmPassword" placeholder="请再次输入新密码" />
			</view>
		</view>

		<view class="actions">
			<uni-button type="primary" :loading="isSubmitting" @tap="submitChange">确认修改</uni-button>
		</view>

		<view class="tips">
			<text class="tips-title">密码安全提示：</text>
			<text class="tips-item">• 不要使用生日、手机号等简单密码</text>
			<text class="tips-item">• 建议使用字母、数字、符号组合</text>
			<text class="tips-item">• 定期更换密码提高账号安全性</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue';

	const formData = ref({
		oldPassword: '',
		newPassword: '',
		confirmPassword: ''
	});
	const isSubmitting = ref(false);

	const canSubmit = computed(() => {
		return formData.value.oldPassword && 
			   formData.value.newPassword && 
			   formData.value.confirmPassword &&
			   formData.value.newPassword === formData.value.confirmPassword &&
			   formData.value.newPassword.length >= 8;
	});

	// 前端人员：修改密码
	// BACKEND REQUIRED
	// POST /api/account/change-password
	// body: { 
	//   oldPassword: string, 
	//   newPassword: string 
	// }
	// Response 200: { success: true, message: "密码修改成功" }
	// Response 400: { success: false, message: "当前密码错误" }
	// Response 400: { success: false, message: "新密码不符合要求" }
	const submitChange = () => {
		if (!canSubmit.value) {
			uni.showToast({ title: '请完善信息', icon: 'none' });
			return;
		}

		if (formData.value.newPassword !== formData.value.confirmPassword) {
			uni.showToast({ title: '两次密码不一致', icon: 'none' });
			return;
		}

		if (formData.value.newPassword.length < 8) {
			uni.showToast({ title: '密码长度至少8位', icon: 'none' });
			return;
		}

		isSubmitting.value = true;
		uni.request({
			url: '/api/account/change-password',
			method: 'POST',
			data: {
				oldPassword: formData.value.oldPassword,
				newPassword: formData.value.newPassword
			},
			success: (res: any) => {
				if (res.data?.success) {
					uni.showToast({ title: '密码修改成功', icon: 'success' });
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					uni.showToast({ title: res.data?.message || '修改失败', icon: 'none' });
				}
			},
			fail: () => {
				uni.showToast({ title: '网络错误', icon: 'none' });
			},
			complete: () => {
				isSubmitting.value = false;
			}
		});
	};
</script>

<style>
	.container { padding: 30rpx; }
	.header { margin-bottom: 40rpx; }
	.title { font-size: 20px; font-weight: 700; color: #333; }
	.subtitle { font-size: 14px; color: #666; display: block; margin-top: 8rpx; }
	.form { margin-bottom: 40rpx; }
	.form-item { margin-bottom: 30rpx; }
	.label { font-size: 16px; font-weight: 600; color: #333; display: block; margin-bottom: 12rpx; }
	.input { width: 100%; height: 88rpx; border: 1px solid #e0e0e0; border-radius: 10rpx; padding: 0 20rpx; background: #fafafa; font-size: 16px; }
	.hint { font-size: 12px; color: #999; display: block; margin-top: 8rpx; }
	.actions { margin-bottom: 40rpx; }
	.tips { background: #f8f9fa; border-radius: 10rpx; padding: 20rpx; }
	.tips-title { font-size: 14px; font-weight: 600; color: #333; display: block; margin-bottom: 12rpx; }
	.tips-item { font-size: 12px; color: #666; display: block; margin-bottom: 8rpx; }
</style>



